<template>
    <div style="height: 360px;width:100%;">
        <div id="add-user" style="height: 100%;width:100%;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "line1",
        props:{
            x_data:{
                type: Array,
                default:() => []
            },
            y_data:{
                type: Array,
                default:() => []
            }
        },
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('add-user'));
            // 绘制图表
            myChart.setOption({
                textStyle: {
                    fontSize: 20,
                    color: '#ffffff'
                },
                grid: {
                    left: 40,
                    right: 25,
                    bottom: 40,
                    top: 40
                },
                xAxis: {
                    data: this.x_data,
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(238, 238, 238, 1)'
                        }
                    },
                    min: 1,
                    max: 31
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['rgba(238, 238, 238, 0.25)']
                        }
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        show: false
                    },
                    backgroundColor: 'rgba(255,255,255,0.15)',
                    borderWidth: 1,
                    borderColor: '#fff',
                    textStyle: {
                        color: 'fff'
                    },
                    formatter: '新增用户<br><img src="" alt="">&nbsp;&nbsp;今日{c}人'
                },
                series: [{
                    name: '今日走势图',
                    type: 'line',
                    smooth: true,
                    color: 'green',
                    lineStyle: {
                        width: 2,
                        color: 'rgba(0, 138, 255, 1)'
                    },
                    symbolSize: 27,
                    symbol: 'image://',
                    showSymbol: false,
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: false,
                        position: 'top',
                    },
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(31, 46, 84, 0.6)'
                        }, {
                            offset: 1,
                            color: 'rgba(0, 138, 255, 0.2)'
                        }])
                    },
                    data: this.y_data
                }]
            });
        }
    }
</script>

<style scoped>

</style>
